<template>
  <!-- 物联网卡支付管理 -->
  <basic-container>
    <div>
      <div class="topBtn"><el-button type="primary" size="small" @click="editBtn">{{ tit }}</el-button></div>
      <el-form :inline="true" :model="form" class="demo-form-inline" :disabled="isView">
        <div>
          <el-form-item label="appkey" prop="appkey">
            <el-input size="small" v-model="form.appkey" ></el-input>
          </el-form-item>
          <el-form-item label="secret" prop="secret">
            <el-input style="width:300px" size="small" v-model="form.secret"></el-input>
          </el-form-item>
          <el-form-item label="rpiNo" prop="rpiNo">
            <el-input size="small" v-model="form.rpiNo" ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="wxAppId" prop="wxAppId">
          <el-input size="small" v-model="form.wxAppId" ></el-input>
          </el-form-item>
          <el-form-item label="wxAppSecret" prop="wxAppSecret">
            <el-input style="width:300px" size="small" v-model="form.wxAppSecret" ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="footerBtn" v-show="!isView">
        <el-button size="small" type="primary" :disabled="disabled" @click="onSubmit">保存</el-button>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { apiEditParam,apiParam } from "@/api/rb-oem/iot/recharge";

export default {
  components: {},
  data() {
    return {
      loading:true,
      isView:true,
      form:{
        appkey:'',
        secret:'',
        rpiNo:'',
        wxAppId:"",
        wxAppSecret:""
      },
      data:{},
      tit:"修改",
      disabled:false
    };
  },
  computed: {
    
  },
  watch: {},
  created(){
    this.onLoad();
  },
  methods: {
    onSubmit(){
      if(this.form.appkey==""){
        this.$message.error("appkey 不能为空！");
      }else if(this.form.secret==""){
        this.$message.error("secret 不能为空！");
      }else if(this.form.rpiNo==""){
        this.$message.error("rpiNo 不能为空！");
      }else if(this.form.wxAppId==""){
        this.$message.error("wxAppId 不能为空！");
      }else if(this.form.wxAppSecret==""){
        this.$message.error("wxAppSecret 不能为空！");
      }else{
        this.disabled = true;
        apiEditParam(this.form).then(res=>{
          console.log(res)
          this.onLoad();
          this.tit = "修改";
          this.isView=!this.isView;
          this.disabled = false;
        },(error) => {
          this.disabled = false;
          window.console.log(error);
        })
      }
    },
    editBtn(){
      if(this.tit == '修改'){
        this.tit = "关闭"
      }else{
        this.tit = "修改"
        this.form = {
          appkey:this.data.appkey,
          secret:this.data.secret,
          rpiNo:this.data.rpiNo,
          wxAppSecret:this.data.wxAppSecret,
          wxAppId:this.data.wxAppId
        }
      }
      this.isView=!this.isView;
    },
    /**
     * @func 初始化
     * */
    onLoad() {
      this.loading = true;
      apiParam().then((res) => {
        const data = res.data.data;
        console.log(data)
        this.data = data;
        this.form = {
          appkey:data.appkey,
          secret:data.secret,
          rpiNo:data.rpiNo,
          wxAppSecret:data.wxAppSecret,
          wxAppId:data.wxAppId
        }
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.topBtn{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.footerBtn{
  width: 100%;
  display: flex;
  justify-content: center;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #000;
}
</style>
